import { t } from 'i18next'
import { useRef } from 'react'
import { Switch, RadioGroup, CheckBox, Space } from '@kedacom/react-next'
import { IconApply, IconEdit, IconLeaveEdit, IconReturnArrow, IconStart, IconStop, StyledWrap } from './style'
import VmpView from './VmpView'
import VmpPoll from './VmpPoll'
import VmpPlan from './VmpPlan'
import MemberList from './MemberList'
import FontSetting from './FontSetting'
import useService from './service'
import { useMccStore } from '../../store'
import shallow from 'zustand/shallow'
import { BatchMemberList } from './BatchMemberList'
import { useVmpStore } from './store'
import { useGlobalStore } from '@/store/global'

export default function Vmp() {
	const SWITCH = useGlobalStore((state) => state.SWITCH)
	const meetingType = useMccStore((state) => state.mccInfo.meetingType)
	const { _isStart, _isEdit, data, updateData } = useVmpStore(
		(state) => ({
			_isStart: state._isStart,
			_isEdit: state._isEdit,
			isOpen: state.isOpen,
			data: state.data,
			updateData: state.updateData,
			update: state.update,
		}),
		shallow
	)
	const {
		disabled,
		viewRef,
		pollRef,
		planRef,
		fontSettingRef,
		getVmpParam,
		startVmp,
		stopVmp,
		EditVmp,
		onIconClose,
		handleApplyVmp,
		handleCancelVmpEdit,
	} = useService()
	const { mode, broadcast, except_self, show_mt_name, voice_hint, layout, mt_name_style, members } = data
	const emptyList = useRef([])
	return (
		<StyledWrap className="mcc-vmp-modal-wrap" mode={mode}>
			<div className="mcc_vmp_content_nav">
				<Space className="_mcc_nav_l">
					<span onClick={onIconClose}>
						<IconReturnArrow></IconReturnArrow>
					</span>
					<span className="_mcc_vmp_title">{meetingType === 2 ? t('定制画面合成') : t('会议画面合成')}</span>
				</Space>
				<Space className="_mcc_nav_r">
					{!_isStart && (
						<>
							<div className="start" onClick={startVmp}>
								<IconStart></IconStart>
								<span>{t('开始画面合成')}</span>
							</div>
						</>
					)}
					{_isStart && (
						<>
							{!_isEdit && (
								<div className="edit" onClick={EditVmp}>
									<IconEdit></IconEdit>
									<span>{t('编辑')}</span>
								</div>
							)}
							{_isEdit && (
								<>
									<div className="apply" onClick={handleApplyVmp}>
										<IconApply></IconApply>
										<span>{t('应用')}</span>
									</div>
									<div className="leaveEdit" onClick={handleCancelVmpEdit}>
										<IconLeaveEdit></IconLeaveEdit>
										<span>{t('退出编辑')}</span>
									</div>
								</>
							)}
							<div className="stop" onClick={stopVmp}>
								<IconStop></IconStop>
								<span>{t('停止画面合成')}</span>
							</div>
						</>
					)}
				</Space>
			</div>
			<div className="mcc_vmp_content">
				<div className="mcc_vmp_down_content">
					<div className="left-panel">
						{(mode === 1 || mode === 2) && <MemberList />}
						{mode === 4 && <BatchMemberList pollData={data.poll ?? null} />}
					</div>
					<div className="right-panel">
						<div className="mcc_vmp_up_content">
							<Space className="_mcc_vmp_plan_wrap">
								<VmpPlan ref={planRef} disabled={disabled} getVmpParam={getVmpParam} />
							</Space>
							{meetingType !== 2 && (
								<Space className="_mcc_vmp_type_wrap">
									{meetingType === 0 && (
										<div className="broadcast-wrap">
											<span className="label">{t('广播')}</span>
											<Switch
												disabled={disabled}
												checked={Boolean(broadcast)}
												onChange={(e, val) => updateData({ ...data, broadcast: val ? 1 : 0 })}
											/>
										</div>
									)}
									<RadioGroup
										disabled={disabled}
										className="mode"
										value={mode}
										options={[
											{ label: t('自动画面合成'), value: 2, width: 164 },
											{
												label: t('定制画面合成'),
												value: 1,
												width: 164,
												className: 'vmp-custom__i18n',
											},
											{ label: t('批量轮询'), value: 4, width: 164 },
										]}
										onChange={(e, value) => {
											let style = 0
											if (value !== 2) {
												style = 5
											}
											updateData({ ...data, mode: value, members: [], layout: style })
										}}
									/>
								</Space>
							)}
							<Space className={`wrap ${disabled ? 'except-self-wrap-disabled' : ''}`}>
								{meetingType === 1 && mode === 2 && !!SWITCH.vmp.exceptSelf && (
									<div className="except-self-wrap">
										<span className="label">{t('不看自己')}</span>
										<Switch
											disabled={disabled}
											checked={Boolean(except_self)}
											onChange={(e, val) => updateData({ ...data, except_self: val ? 1 : 0 })}
										/>
									</div>
								)}
							</Space>
							<Space>
								{mode === 4 && (
									<VmpPoll ref={pollRef} pollData={data.poll ?? null} disabled={disabled} />
								)}
							</Space>
						</div>
						<div className="content">
							{(!_isStart || (_isStart && _isEdit)) && mode === 2 ? (
								<div className="dynamic-view">
									<div className="dynamic-view-content">
										<div>
											<span className="icon"></span>
											<span className="tip_text">{t('开始画面合成显示合成风格')}</span>
										</div>
									</div>
								</div>
							) : (
								<VmpView
									ref={viewRef}
									layout={layout}
									members={mode === 4 && (!_isStart || _isEdit) ? emptyList.current : members ?? []}
									disabled={disabled}
									isBoxDisabled={mode !== 1}
									isShowSingle={mode === 2}
									noAddIcon={mode !== 1}
									mode={mode}
								/>
							)}
						</div>
						<div className="bottom-setting">
							<CheckBox
								className="voice-setting"
								disabled={disabled}
								checked={Boolean(voice_hint)}
								onChange={(e, val) => updateData({ ...data, voice_hint: val ? 1 : 0 })}
							>
								{t('识别声音来源')}
							</CheckBox>
							{meetingType !== 2 && (
								<>
									<CheckBox
										className="name-setting"
										disabled={disabled}
										checked={Boolean(show_mt_name)}
										onChange={(e, val) => updateData({ ...data, show_mt_name: val ? 1 : 0 })}
									>
										{t('显示终端名称')}
									</CheckBox>
									<FontSetting
										ref={fontSettingRef}
										disabled={disabled}
										size={mt_name_style?.font_size}
										position={mt_name_style?.position}
										fontColor={mt_name_style?.font_color}
										showText={mode === 1}
										changeCb={(type, val) => {
											//恢复数据时store中数据不变化不会触发useEffect,因此需要实时更新store中数据
											let _data = { ...mt_name_style }
											switch (type) {
												case 'size':
													_data.font_size = val
													break
												case 'position':
													_data.position = val
													break
												case 'color':
													_data.font_color = val
													break
											}
											updateData({ ...data, mt_name_style: _data })
										}}
									/>
								</>
							)}
						</div>
					</div>
				</div>
			</div>
		</StyledWrap>
	)
}
